<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>)</title> 
<script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js">
</script>
<script>
   $(document).ready(function(){
       $("#in").on("click",function(){
           $("#div1").fadeIn(1000);
           $("#div2").fadeIn(1000);
           $("#div3").fadeIn(1000);

       });
       $("#out").on("click",function(){
           $("#div1").fadeOut(1000);
           $("#div2").fadeOut(1000);
           $("#div3").fadeOut(1000);

       });
       $("#toggle").on("click",function(){
           $("#div1").fadeToggle(1000);
           $("#div2").fadeToggle(1000);
           $("#div3").fadeToggle(1000);

       });
       $("#to").on("click",function(){
           $("#div1").fadeTo(1000,0);
           $("#div2").fadeTo(1000,0.5);
           $("#div3").fadeTo(1000,0.7);

       });
   });
</script>
</head>

<body>
    <button id="in">fadeIn</button>
    <button id="out">fadeOut</button>
    <button id="toggle">fadeToggle</button>
    <button id="to">fadeTo</button>
    <div id="div1" style="width:80px; display:none; height:80px;background-color:blueviolet"></div>
    <div id="div2" style="width:80px; display:none; height:80px;background-color:blue"></div> 
    <div id="div3" style="width:80px; display:none; height:80px;background-color:yellow"></div>  
</body>
</html>